<template>
  <div class='mainInfo' id="mainInfo" @scroll='messageScroll' @click="mainInfoClick($event)" :key='`${toInfo.id}`' ref='messageScroll'
    :style="{overflow:chatFunctionActive?'hidden':'auto',marginRight:chatFunctionActive?'8px':'0'}">

    <!-- 消息的主体 -->

    <div v-for='(item, index) in currentTempChat' :key='`chatList_${index}`' class="chat_list_wrap">
      <!-- zk新增style，chatlist0时间升序，chatlist1时间降序  :style="{'flex-direction':index == 0?'column-reverse':'column'}" -->
      <div class="chat_view_box" :style="{ 'flex-direction': index == 0 ? 'column' : 'column-reverse' }">
        <template v-for='(temp, count) in item'>
          <div @click="chatChoose(temp)" class="chat_item" :id="'chat_item' + temp.messageId" :key="'chat_item' + temp.messageId + count"
            :style='{ cursor: isMultiSelect ? "pointer" : "unset", justifyContent: temp.sendId == myInfo.id ? isMultiSelect ? "space-between" : "flex-end" : "initial", backgroundColor: (temp.messageId == currentNewsId && activeRecords) ? "rgba(0,0,0,.1)" : "#f7f7f7" }'>
            <span :class="['checkchat', { checkchatClear: temp.isDownLoad == 404, choosechat: temp.isChoose }]"
              v-if="temp.type != 'system' && temp.type != 'revocation' && temp.type != 'announcement' && temp.type != 'shareGroup' && isMultiSelect"></span>
            <span v-show="temp.type == 'shareGroup' && isMultiSelect"></span>
            <div
              :class='{ mySend: temp.sendId == myInfo.id && temp.type != "system" && temp.type != "revocation" && temp.type != "announcement", toSend: temp.sendId != myInfo.id, main_chat_list: temp != "system" && temp.type != "revocation", srCenter: temp.type == "system" || temp.type == "revocation" }'>
              <!-- 消息类型为撤销 -->
              <div v-if="temp.type == 'revocation'" class='system_revocation_value'>
                <!-- 他人撤销 -->
                <span v-show="temp.sendId != myInfo.id">{{ temp.value }}</span>
                <!-- 自己撤销 -->
                <span v-show="temp.sendId == myInfo.id">你撤回了一条消息<a v-if="showReEdit(temp)" @click="reEdit(temp.messageId)"> 重新编辑</a></span>
              </div>
              <!-- 消息类型为群消息 -->
              <div class='system_revocation_value' v-if="temp.type == 'system'" @click.stop.prevent="groupUserShow = !groupUserShow">
                <div v-if="!groupUserShow && (temp.value.split(',').length > 1)">
                  <!-- <span>{{ temp.value.indexOf('移') != -1 ? "您将" : "您邀请了"}}</span> -->
                  <span>{{ '( ' + temp.value.split(",").length + ' )人' }}</span>
                  <span>{{ (temp.value.indexOf('移') != -1 ? '移出' : '加入') + '了群聊' + temp.value.split(',')[temp.value.split(',').length - 1].split(' ')[temp.value.split(',')[temp.value.split(',').length - 1].split(' ').length - 1] }}</span>
                  <span class="more">...</span>
                </div>
                <div v-else>{{ temp.value }}</div>
              </div>
              <!-- 消息类型为聊天内容 -->
              <div class="chat_main" :style='{ justifyContent: temp.sendId == myInfo.id ? "flex-end" : "flex-start" }' v-if='temp.type != "system" && temp.type != "revocation" && temp.type != "announcement"'>
                <!-- 个人信息 -->
                <div class="chat_to_head_w m-no-select" @click.stop.prevent='getMemberInfo($event, temp, toInfo.isGroup)' v-if='temp.sendId != myInfo.id && temp.type != "system" && temp.type != "revocation"'>
                  <img
                    :src="(toInfo.isGroup == '0' && !$isNull(toInfo.head)) ? (`${$store.state.headPathUrl}${toInfo.id}${toInfo.head}.PNG`) : (toInfo.isGroup == '1' && !$isNull(temp.head)) ? (`${$store.state.headPathUrl}${temp.id}${temp.head}.PNG`) : `static/image/home/person_${temp.gender == 1 ? 1 : 2}.png`"
                    draggable="false" class="img-border" :onerror="defaultImg" />
                  <div class='chatUserName'>{{ temp.name }}</div>
                </div>
                <div @contextmenu.stop.prevent='chatFunctionCt($event, temp)'
                  :class='{ divMySend: temp.sendId == myInfo.id && temp.type != "system" && temp.type != "revocation" && temp.type != "announcement", divToSend: temp.sendId != myInfo.id }'>
                  <div class="wrap" :class='{ wrapMy: temp.sendId == myInfo.id && temp.type != "system" && temp.type != "revocation" && temp.type != "announcement", wrapTo: temp.sendId != myInfo.id }'>
                    <!-- 消息发送的判断标识

                    && temp.isDownLoad != 404

                    -->
                    <template v-if="temp.sendId == myInfo.id ">
                      <!-- 消息发送 1 发送中 0 成功 2 失败 -->
                      <img v-if="temp.isSuccessSend == 1" style="width: 15px;height: 15px;flex-shrink: 0;" src="static/image/home/article/Aloading.gif" />
                      <img v-if="temp.isSuccessSend == 2" style="width: 15px;height: 15px;cursor: pointer;flex-shrink: 0;" src="static/image/home/article/ease_msg_state_fail_resend_pressed.png"
                        @click.stop.prevent="againSendFailMsg(temp)" />
                    </template>
                    <!-- 消息类型为文本 -->
                    <div v-if='temp.type == "text"' class="chat_text_box" :class="{ text_right: temp.sendId == myInfo.id, textR: temp.sendId == myInfo.id, textL: temp.sendId != myInfo.id }">
                      <div class="chat_text_time" :class="temp.sendId == myInfo.id ? 'time_right' : 'time_left'">{{
                        temp.time
                          | timeFormat
                      }}</div>
                      <div class='main_chat_text' :class='{ bgGreen: temp.sendId != myInfo.id, bgBlue: temp.sendId == myInfo.id }' v-html='getFontConfigure(temp)'></div>
                    </div>
                    <!-- 消息类型为文章 -->
                    <div v-if='temp.type == "article"' class="chat_article_box" :class="{ text_right: temp.sendId == myInfo.id }" @click="openLinkFn(JSON.parse(temp.value))">
                      <div class="chat_article_time" :class="temp.sendId == myInfo.id ? 'time_right' : 'time_left'">
                        {{ temp.time | timeFormat }}</div>
                      <div class="chat_text_draw">
                        <div class="chat_text_draw_top">
                          <div :class="['chat_text_draw_top_t', { active: !$isNull(JSON.parse(temp.value).imgUrl) }]">
                            <div class="chat_text_draw_top_t_t">
                              {{
                                JSON.parse(temp.value).title.length > 30 ? (JSON.parse(temp.value).title.substring(0,
                                  30) + '...') : JSON.parse(temp.value).title
                              }}
                            </div>
                            <div class="chat_text_draw_top_t_m">
                              {{
                                JSON.parse(temp.value).describe.length > 40 ?
                                  (JSON.parse(temp.value).describe.substring(0, 40) + '...') :
                                  JSON.parse(temp.value).describe
                              }}
                            </div>
                          </div>
                          <div v-if="!$isNull(JSON.parse(temp.value).imgUrl)" class="chat_text_draw_top_i">
                            <img :src="articleImgUrl + JSON.parse(temp.value).imgUrl" @error.once='fileurl($event, JSON.parse(temp.value).imgUrl)' />
                          </div>
                        </div>
                        <div class="chat_text_draw_bottom">{{ '来源：即时通讯' }}</div>
                      </div>
                    </div>
                    <!-- 消息类型为共享屏幕 -->
                    <div v-if='temp.type == "screen"' class="chat_screen" :class="{ text_right: temp.sendId == myInfo.id }" @click.stop.prevent="joinScreenFn(temp)">
                      <div class="chat_screen_time" :class="temp.sendId == myInfo.id ? 'time_right' : 'time_left'">
                        {{ temp.time | timeFormat }}</div>
                      <div class="chat_screen_box">
                        <div class="chat_screen_box_l">
                          <div class="chat_screen_box_l_t">同屏邀请</div>
                          <div class="chat_screen_box_l_b">{{
                            temp.sendId == myInfo.id ? `你邀请对方加入共享屏幕` : `对方邀请你加入共享屏幕`
                          }}
                          </div>
                        </div>
                        <div class="chat_screen_box_r">
                          <img src="static/image/screen/invite_screen.png" />
                        </div>
                      </div>
                    </div>
                    <!-- 消息类型为图片 -->
                    <div v-else-if='temp.type == "image"' class="m-no-select chat_img_box" @click="initView(item, temp)">
                      <div class="chat_img_time" :class="temp.sendId == myInfo.id ? 'time_right' : 'time_left'">{{
                        temp.time
                          | timeFormat
                      }}</div>
                      <div class="chat_img_main" :class='{ bgGreen: temp.sendId != myInfo.id, bgBlue: temp.sendId == myInfo.id }'>
                        <!-- <img draggable="false" viewer='true' v-lazy="temp.value" :onerror="errorImg" /> -->
<!--                        <img class="exist" draggable="false" v-if="temp.just" :src="temp.justValue" :onerror="errorImg"-->
<!--                             @mousedown="moveCopy(temp, $event, 0)" />-->
                        <img class="exist" :small_pic="temp.smallValue ? temp.smallValue : smallPath[temp.messageId]" draggable="false" v-if="temp.value" :src="$isRelativePath(temp.value)" :onerror="errorImg"
                          @mousedown="moveCopy(temp, $event, 0)" />
                        <img class="loading" draggable="false" v-else src='static/image/home/article/Aloading.gif'>
                        <!-- <vue-preview :slides="temp.value | formatImgSrc" class="imgPrev"></vue-preview> -->
                      </div>
                      <Progress v-if="temp.upload == 1" :percent="temp.progress ? temp.progress : 0" status="active"></Progress>
                    </div>
                    <!-- 消息类型为文件 -->
                    <div v-else-if='temp.type == "file"' class="chat_file_box m-no-select">
                      <div class="chat_file_time" :class="temp.sendId == myInfo.id ? 'time_right' : 'time_left'">{{
                        temp.time
                          | timeFormat
                      }}</div>
                      <div class="chat_file_main">
                        <div style='display: flex;' @mousedown="moveCopy(temp, $event, 1)">
                          <!-- <div class="chat_file_icon"> -->
                          <div class="chat_file_icon">
                            <img class="file_pic" draggable="false" v-lazy="$utilJs.getFileType(temp.value)" />
                            <img draggable="false" v-if="otherDownloaded(temp)" class="file_d" src='static/image/home/download_my.png' />
                            <img draggable="false" v-else-if="((temp.isDownLoad == '0' || temp.isDownLoad == 'Message-roaming') && temp.upload != 1) || (!temp.downloaded && temp.sendId == myInfo.id)" class="file_d"
                              src='static/image/home/download_no.png' />
                            <img draggable="false" v-else-if="temp.isDownLoad != '0' && temp.isDownLoad != 'loading' && temp.isDownLoad != 'Message-roaming'" class="file_d" src='static/image/home/download_has.png' />
                            <img draggable="false" v-else class="file_d" src='static/image/home/download_no.png' />
                          </div>
                          <div class="chat_file_info">
                            <div>{{ temp.value | interception }}</div>
                            <div>{{ temp.duration | convertByte }}</div>
                            <Progress v-if="temp.upload == 1" :percent="temp.progress ? temp.progress : 0" status="active"></Progress>
                          </div>
                        </div>
                        <div class="chat_file_line" v-if="!temp.uploading"></div>
                        <div style="display:flex;">
                          <div class='down_load_file' style="padding-top:.6em;" v-if="temp.upload == 1" @click.stop.prevent="stopUpload(temp)">停止</div>
                          <div class="chat_file_set" v-if="!temp.uploading && temp.isDownLoad != '404'">
                            <!-- Message-roaming代表漫游类型 -->
                            <div class='down_load_file' v-if="(temp.isDownLoad == '0' || temp.isDownLoad == 'Message-roaming') && temp.upload != 1" @click.stop.prevent='toDownFile(temp)'>下载</div>
                            <div class='preview_file' v-if="temp.isDownLoad != '0' && temp.isDownLoad != 'loading' && temp.isDownLoad != 'Message-roaming'" @click.stop.prevent='toPreviewFile(temp)'>预览</div>
                            <div class='preview_file' v-if="temp.isDownLoad != '0' && temp.isDownLoad != 'loading' && temp.isDownLoad != 'Message-roaming'" @click.stop.prevent='toDownload(temp)'>另存为</div>
                            <div class='preview_file' v-if="temp.isDownLoad != '0' && temp.isDownLoad != 'loading' && temp.isDownLoad != 'Message-roaming'" @click.stop.prevent='openPath(temp)'>打开目录</div>
                          </div>
                        </div>
                        <div v-if="temp.isDownLoad == '404'" class="file_msg_tip">上传失败,请重新上传</div>
                      </div>
                    </div>
                    <!-- 消息类型为多媒体文件 -->
                    <div v-else-if='temp.type == "audio"' class="chat_audio_box m-no-select">
                      <div class="chat_audio_time" :class="temp.sendId == myInfo.id ? 'time_right' : 'time_left'">
                        {{ temp.time | timeFormat }}</div>
                      <div class='audio_parent' @click='toPlayAudio(temp)' :class='{ bgGreen: temp.sendId != myInfo.id, bgBlue: temp.sendId == myInfo.id }'>
                        <div class="chat_audio_dur chat_audio_dur_left" v-if='temp.sendId == myInfo.id'>
                          {{ temp.duration }}"
                        </div>
                        <div class="chat_audio_i_w" :style='{ justifyContent: temp.sendId == myInfo.id ? "flex-end" : "flex-start" }'>
                          <img draggable="false" src="static/image/home/ease_chatfrom_voice_playing.png" v-if='temp.sendId != myInfo.id' :ref="`audio_image_${temp.messageId}`" />
                          <!-- 显示语音文件名称 -->
                          <!-- <div v-show='temp.value' class="chat_audio_text">{{temp.value}}</div> -->
                          <div v-show='temp.isShow' class="chat_audio_text">{{ temp.isShow }}</div>
                          <audio :src="$isRelativePath(temp.isDownLoad)" :ref='temp.messageId' @ended="init_auto_play"></audio>
                          <img draggable="false" src="static/image/home/ease_chatto_voice_playing.png" v-if='temp.sendId == myInfo.id' :ref="`audio_image_${temp.messageId}`">
                        </div>
                        <div class="chat_audio_dur chat_audio_dur_right" v-if='temp.sendId != myInfo.id'>
                          {{ temp.duration }}"
                        </div>
                      </div>
                    </div>
                    <!-- 消息类型为定位 -->
                    <div v-else-if='temp.type == "GPS"' class="chat_gps_box">
                      <div class="chat_gps_time" :class="temp.sendId == myInfo.id ? 'time_right' : 'time_left'">{{
                        temp.time
                          | timeFormat
                      }}</div>
                      <div :class='{ bgGreen: temp.sendId != myInfo.id, bgBlue: temp.sendId == myInfo.id }' class="chat_gps_main" @click.stop.prevent="showMap(temp)">
                        <m-map :detail='temp'></m-map>
                      </div>
                    </div>
                    <!-- 消息类型为视频 -->
                    <div v-else-if='temp.type == "video"' class="chat_video_box">
                      <div class="chat_video_time" :class="temp.sendId == myInfo.id ? 'time_right' : 'time_left'">
                        {{ temp.time | timeFormat }}</div>
                      <div :class='{ bgGreen: temp.sendId != myInfo.id, bgBlue: temp.sendId == myInfo.id }' class="chat_video_main input_video">
                        <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions[temp.messageId]"></video-player>
                      </div>
                    </div>
                    <!-- 消息类型为分享群 -->
                    <div v-else-if='temp.type == "shareGroup"' class="share_group_main" @click="shareClick(temp)">
                      <div class="chat_time" :class="temp.sendId == myInfo.id ? 'time_right' : 'time_left'">{{
                        temp.time |
                          timeFormat
                      }}</div>
                      <div :class='{ bgGreen: temp.sendId != myInfo.id, bgBlue: temp.sendId == myInfo.id }' class="share_group_box">
                        <div calss="share_text_m" style="flex:1;margin-right:5px;">
                          <div class="share_t" style="margin-bottom:5px;color:#333;font-weight: bold;">邀请入群</div>
                          <div style="color:#333;">邀请你加入"{{
                            temp.value.shareGroupName ? temp.value.shareGroupName : ''
                          }}"
                          </div>
                        </div>
                        <img src="static/image/home/chat/session_group.png" />
                      </div>
                    </div>
                  </div>
                  <div v-if="temp.replay && !$isNull(temp.replay)" class="replay" v-html="temp.replay"></div>
                  <!-- 回复内容 -->
                  <div v-if='temp.sendId == myInfo.id && temp.receiveId != "fileAssistant"' class="text_right read_box">
                    <!-- 发送成功 -->
                    <div v-if="temp.isSuccessSend == 1">
                      <span>发送中</span>
                    </div>
                    <!-- 发送失败 -->
                    <div v-else-if="temp.isSuccessSend == 2">
                      <span>发送失败</span>
                    </div>
                    <div v-else>
                      <div v-if="toInfo.isGroup == '0'" style="white-space:nowrap;">
                        <span v-if="temp.type == 'file'">{{ temp.downloaded ? '已下载' : '未下载' }}
                          <span style="color: #bbbec4;">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                        </span>
                        {{!temp.downloaded ? temp.isByRead ? temp.isByRead == '1' ? '已读' : '未读' : '未读' : '已读'}}
                      </div>
                      <div v-else>
                        <!-- zk新增，未下载显示 -->
                        <span v-if="temp.type == 'file'"><span style="cursor:pointer;" v-html="groupReadInfo(temp.downloadData, 1)" @click.stop.prevent="readView(temp.downloadData, '1', temp)"></span><span
                            style="color: #bbbec4;">&nbsp;&nbsp;|&nbsp;&nbsp;</span></span>
                        <span v-html="groupReadInfo(temp.readData)" @click.stop.prevent="readView(temp.readData, '0', temp)" style="cursor:pointer;"></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="m-no-select chat_my_h_box" v-if='temp.sendId == myInfo.id'>
                  <img
                    :src="temp.isServiceAcc ? 'static/image/service/customer_service_avatar.png' : !$isNull(myInfo.headImage) ? (`${$store.state.headPathUrl}${myInfo.id}${myInfo.headImage}.PNG`) : `static/image/home/person_${myInfo.gender == 1 ? 1 : 2}.png`"
                    draggable="false" class="img-border" :onerror="defaultImg" />
                  <div class='chatUserName' v-if="toInfo.isGroup == '1'">我自己</div>
                </div>
              </div>
              <!-- 消息类型为通知公告 -->
              <div v-else-if="temp.type == 'announcement'" @contextmenu.stop.prevent='chatFunctionCt($event, temp)'
                :style='temp.sendId == myInfo.id ? "display: flex;justify-content: flex-end;" : "display: flex;justify-content: flex-start;"'>
                <div class="toSend main_chat_list">
                  <div class="chat_main" :style='{ justifyContent: temp.sendId == myInfo.id ? "flex-end" : "flex-start" }'>
                    <div v-if='temp.sendId != myInfo.id' class="chat_to_head_w" style="cursor:initial;">
                      <img :src="!$isNull(temp.head) ? (`${$store.state.headPathUrl}${temp.id}${temp.head}.PNG`) : `static/image/home/person_${temp.gender == 1 ? 1 : 2}.png`" class="img-border" :onerror="defaultImg">
                      <div class="chatUserName">{{ temp.name }}</div>
                    </div>
                    <div style="display: flex; justify-content: flex-end; align-items: center; position: relative;">
                      <div class="chat_text_box">
                        <div class="chat_text_time time_left">{{ temp.time | timeFormat }}</div>
                        <div class="announcement_box">
                          <div class="an_m_head">
                            <div class="an_head_icon"></div>
                            群公告
                          </div>
                          <div class="an_m_main">
                            <div class="an_m_text">{{ temp.value }}</div>
                            <div class="an_m_file_w" v-if="temp.DownLoadId && temp.DownLoadId != 1">
                              <div class="an_m_file_l"></div>
                              <div class="an_m_file_r">
                                <div class="an_m_file_name">{{ temp.isDownLoad }}</div>
                                <div class="an_m_file_size">
                                  <span>{{ temp.duration | convertByte }}</span>
                                  <span v-if="temp.upload != 0" class="an_m_f_down" @click="announcementFile(temp)">下载</span>
                                  <span v-if="temp.upload == 0" class="an_m_f_down" @click.stop.prevent='toPreviewFile(temp, "announcement")'>预览</span>
                                </div>
                              </div>
                            </div>
                            <Progress v-if="temp.upload == 1" :percent="temp.progress ? temp.progress : 0" status="active"></Progress>
                          </div>
                        </div>
                      </div>
                      <div v-if='temp.sendId == myInfo.id' class="chat_to_head_w" style="cursor:initial;">
                        <img :src="!$isNull(temp.head) ? (`${$store.state.headPathUrl}${temp.id}${temp.head}.PNG`) : `static/image/home/person_${temp.gender == 1 ? 1 : 2}.png`" class="img-border" :onerror="defaultImg">
                        <div class="chatUserName">我自己</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- 消息内容的操作 -->
    <div v-if="chatFunctionActive" class="chat_function" :style='{ top: chatMenuTop + "px", left: chatMenuLeft + "px" }' @click.stop.prevent="" @mouseleave="showToForwardingClose()">
      <li class='chat_function_item' v-if='currentChatItem.type == "audio"' @click.stop.prevent='voiceConversion(currentChatItem)'>语音转文字</li>
      <li class='chat_function_item' @click.stop.prevent='savePicture(currentChatItem)' v-if='currentChatItem.type == "image"'>下载</li>
      <!-- 复制消息内容 -->
      <li class='main_chat_function' v-if='(currentChatItem.type == "text" || currentChatItem.type == "image") ||
    ((currentChatItem.type == "file") &&
      (currentChatItem.isDownLoad != 404 && currentChatItem.isDownLoad != 0))' @click.stop.prevent='toCopyChat(currentChatItem)'>复制
      </li>
      <!-- currentChatItem.sendId != myInfo.id && -->
      <li class='chat_function_item' @click.stop.prevent='toReply(currentChatItem)' v-if=' currentChatItem.type == "text"'>回复</li>
      <!-- 当文件下载成功后的操作选项 -->
      <div v-if="currentChatItem.isDownLoad != 404">
        <li class='chat_function_item' v-if="currentChatItem.type == 'file'" @mouseover="showToForwarding()">转发
          <b class="expand">></b>
          <ul class="list_expand" v-show="isShowForward" @mouseleave="showToForwardingClose()">
            <li @click.stop.prevent='toForwarding(currentChatItem)'>原文件</li>
            <li v-if="currentChatItem.isDownLoad != '0' &&
            currentChatItem.isDownLoad != 'loading' &&
            currentChatItem.isDownLoad != 'Message-roaming'" @click.stop.prevent='toForwardingLocal(currentChatItem)'>
              本地文件
            </li>
          </ul>
        </li>
        <li class='chat_function_item' v-if="currentChatItem.type != 'file' &&
          currentChatItem.type != 'announcement' &&
          currentChatItem.type != 'screen' &&
          currentChatItem.type != 'shareGroup'
        " @click.stop.prevent='toForwarding(currentChatItem)'>转发
        </li>
      </div>
      <li class='chat_function_item'
        v-if='(currentChatItem.isSuccessSend != "2" || currentChatItem.sendId != myInfo.id) && currentChatItem.type != "GPS" && currentChatItem.type != "shareGroup" && currentChatItem.isDownLoad != 404 && currentChatItem.type != "announcement" && currentChatItem.type != "screen"'
        @click.stop.prevent='toCollection(currentChatItem)'>收藏</li>
      <li class='chat_function_item' @click.stop.prevent='multiSelectClick' v-if="currentChatItem.isDownLoad != 404 && currentChatItem.type != 'announcement' && currentChatItem.type != 'shareGroup'">
        多选</li>
      <li class='chat_function_item' v-if='currentChatItem.type == "text"' @click.stop.prevent='toBacklog(currentChatItem)'>待办</li>
      <li class='chat_function_item' @click.stop.prevent='toUndo(currentChatItem)' v-if='currentChatItem.sendId == myInfo.id && flagTime'>撤销</li>
      <li class='chat_function_item' @click.stop.prevent='toDelChat(currentChatItem)' v-if="currentChatItem.type != 'announcement'">删除</li>
      <li class='chat_function_item' v-if='(toInfo.isGroup == 1 && currentChatItem.type == "text" && (currentChatItem.sendId == myInfo.id ? currentChatItem.isSuccessSend == 0 : true))'
        @click.stop.prevent='toAddText(currentChatItem)'>添加语录</li>
    </div>
    <!-- 跳转到未读消息 -->
    <div class="goUnread" @click="toFirstUnread" v-show="firstUnreadId">
      首条未读消息
      <img src="static\image\search\input_more_pick.png" alt="">
    </div>
    <!-- 跳转到最新消息 -->
    <div class="goBottom" @click="backBottom" v-show="$parent.havenext">
      回到最新位置
      <img src="static\image\search\down.png" alt="">
    </div>
  </div>
</template>
<script>
import { addCollect, editGroup, audioToText } from "@/api/homeChatMain";
import mMap from "./m-map.vue"; //地图
import { mapState } from "vuex";
import Viewer from "viewerjs";
import tools from "@/utils/tools";
export default {
  props: {
    toInfo: {
      type: Object,
      default: () => {
        return {
          id: "",
          name: "",
          isGroup: false,
        };
      },
    },
    read_info_show: {
      type: Boolean,
      default: false,
    },
    chatList: {
      type: Array,
      default: () => {
        return [[], []];
      },
    },
    personalStatus: {
      type: Number,
      default: 0,
    },
    group_detail: {
      type: Object,
      default: () => {
        return {
          users: [],
        };
      },
    },
    free_list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    group_info_show: {
      type: Boolean,
      default: false,
    },
    sessionList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    setaList: {
      type: Object,
      default: () => {
        return {};
      },
    },
    messageFree: {
      type: Boolean,
      default: false,
    },
    playerOptions: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isMultiSelect: {
      type: Boolean,
      default: false,
    },
    chatFunctionActive: {
      type: Boolean,
      default: false,
    },
    expression: {
      type: Array,
      default: () => {
        return [];
      },
    },
    toInfoHeadPath: {
      type: String,
      default: "",
    },
    currentTempChat: {
      type: Array,
      default: () => {
        return [[], []];
      },
    },
    currentNewsId: {
      type: String,
      default: "",
    },
    firstUnreadId: {
      type: String,
      default: "",
    },
    activeRecords: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    mMap,
    // viewTemplate
  },
  data() {
    return {
      smallPath: {}, //zk新增，存放当前窗体的small图，属性名为msgid，属性值为path地址
      canSwitchChatMain: false, //zk新增，到顶到底是否可以更新页面
      isUpdate: false,
      currentChatItem: {},
      chatMenuTop: 0,
      chatMenuLeft: 0,
      chatChooseList: [],
      editGroupName: "",
      // errorImg: 'this.src="' + require('../../../static/image/home/errDefault.png') + '"',
      errorImg: 'this.src="static/image/home/errDefault.png"', //zk1224修改
      // defaultImg: 'this.src="' + require('../../../static/image/home/person_1.png') + '"',
      defaultImg: 'this.src="static/image/home/person_1.png"', //zk1224修改
      chatFunArray: [
        {
          name: "add",
          active: false,
          title: "添加联系人",
        },
        {
          name: "detail",
          active: false,
          title: "个人简介",
        },
      ], //聊天页面头部功能
      audio_play: null, //语音播放的refs
      audio_item: null, //语音播放的messageId
      audio_time: null, //语音播放时图片更改定时器
      flagTime: true,
      group_read: 0,
      group_unread: 0,
      readUsers: [],
      unreadUsers: [],
      group_info: {},
      viewNum: 100,
      topChat: false,
      quickShow: false,
      faceChoose: 0,
      userValue: "",
      moving: false, //拖动中
      quickList: [
        {
          content: "好的,稍后回复。",
        },
        {
          content: "收到,正在查看。",
        },
        {
          content: "会议中,不方便回复。",
        },
      ],
      setSizeShow: false,
      sizeValue: 14,
      userInputKey: new Date().getTime(),
      groupUserShow: false,
      viewer: null,
      timeNow: 0,
      isShowForward: false,
      currentTextCopy: "",
      tempFix: null,
      scrollTimer: null,
    };
  },
  filters: {
    setGroupUser(str) {
      return str.length > 4 ? str.slice(0, 4) + "..." : str;
    },
    Interception(value) {
      let index = value.lastIndexOf("/");
      let str = value.substring(index + 1, value.length);
      return str;
    },
    formatImgSrc(src) {
      return [
        {
          src: src,
          msrc: src,
          w: 150,
          h: 150,
        },
      ];
    },
  },
  watch: {
    chatList: {
      //zk注释，chatlist改变时刷新页面
      handler(newValue, oldValue) {
        this.timeNow = new Date().getTime();
        this.$forceUpdate();
      },
      deep: true,
    },
    currentTempChat: {
      handler(newValue, oldValue) {
        // this.$forceUpdate();
        if (this.tempFix) {
          this.$nextTick(() => {
            //当一条消息内容过多撑满窗口时，滚轮不能拉到底
            this.fixedPosition(this.tempFix[0], this.tempFix[1]);
            this.tempFix = null;
          });
        }
      },
      deep: true,
    },
    isMultiSelect() {
      if (!this.isMultiSelect) {
        this.chatChooseList = [];
      }
    },
    // 锚点定位
    anchorPosition() {
      let domID = "#chat_item" + this.anchorPosition;
      document.querySelector(domID).scrollIntoView(true);
      this.$store.commit("Anchor_Position", null);
    },
  },
  computed: {
    ...mapState([
      "myInfo",
      "user_hot_key",
      "personInfoList",
      "ws",
      "user_hot_key",
      "anchorPosition",
      "syncUserStatus",
    ]),
    tableId() {
      return this.myInfo.id;
    },
    sqlTable() {
      return {
        userHotKey: `user_hot_key`,
        uninterruptedList: `uninterrupted_list_${this.tableId}`, //免打扰列表
        userInformation: `user_information_${this.tableId}`, //用户信息表
        sessionList: `session_list_${this.tableId}`, //会话列表
        broadcastList: `broadcast_list_${this.tableId}`, //广播列表
        publicList: `public_list_${this.tableId}`, //公众号列表
        groupList: `group_list_${this.tableId}`, //群列表
        messageList: `message_list_${this.tableId}`, //群聊消息表
        privateList: `private_list_${this.tableId}`, //单聊消息表
        publicRecords: `public_records_${this.tableId}`, //公众号记录表
        groupUsers: `group_users_${this.tableId}`, //	groupMessageEnity: 'GroupMessageEnity_' + this.myInfo.id,
        systemTable: `system_${this.tableId}`,
      };
    },
    articleImgUrl() {
      return this.$store.state.url + "api/v1/oim/image/download.do?id=";
    },

    articleErrorUrl() {
      return this.$store.state.url + "api/v1/oim/file/download.do?id=";
    },
  },
  mounted() {
    setTimeout(() => {
      let _this = this;
      this.viewer = new Viewer(document.getElementById("mainInfo"), {
        show: function () {
          // 动态加载图片后，更新实例
          _this.viewer.update();
        },
      });
    }, 3000);
  },
  methods: {
    fileurl(e, id) {
      console.log(e, id, 594);
      e.target.src = this.articleErrorUrl + id;
    },
    //对方是否下载
    otherDownloaded(item) {
      let flag = false;
      let data = { unread: 1 };
      if (item.downloadData && item.downloadData != "undefined") {
        data = JSON.parse(item.downloadData);
      }
      if (
        (item.downloaded && item.sendId == this.myInfo.id) ||
        data.unread == 0
      ) {
        flag = true;
      }
      return flag;
    },
    //获取字体配置
    getFontConfigure(e) {
      let fontSize1 = {};
      let value = this.toExpression(e.value);
      if (!e.fontSize || e.fontSize == "undefined") {
        //未找到相关配置，用默认字体
        value = `<div style="font-size:14px">${value}</div>`;
        return value;
      } else if (e.fontSize.length == 2) {
        //兼容旧版库只存字体大小
        value = `<div style="font-size:${e.fontSize}px">${value}</div>`;
        return value;
      } else {
        fontSize1 = JSON.parse(e.fontSize);
        value = `<div style="font-size:${fontSize1.size}px;
            color:${fontSize1.color};font-weight:${fontSize1.bold}">${value}</div>`;
        return value;
      }
    },
    showToForwarding() {
      this.isShowForward = true;
    },
    showToForwardingClose() {
      if (this.isShowForward) {
        this.isShowForward = false;
      }
    },
    updateInterface() {
      this.$forceUpdate();
    },
    againSendFailMsg(temp) {
      if (temp.isDownLoad == 404) return this.$message.info('请重新选择文件')
      this.$emit("againSendFailMsg", temp);
    },
    stopUpload(item) {
      let res = this.$shell("StopTransFile", [item.messageId]);
    },
    mainInfoClick(e) {
      let attr = e.target.getAttribute("class");
      if (attr == "httpUrl") {
        let res = this.$shell("OpenBrowser", [
          e.target.innerHTML.replace(/&nbsp;/g, ""),
        ]);
      }
    },
    shareClick(item) {
      //zk1215标识，点击了别人分享的群触发
      //发送确认群审核是否存在
      console.log(item, "点击分享消息时的item");
      let initid = this.$func.uuid();
      let shareGroupInfo = JSON.parse(JSON.stringify(item));
      if (item.sendId == this.myInfo.id) {
        return;
      }
      this.$emit("getGroupInfo", JSON.parse(JSON.stringify(item)));
    },
    //初始化图片预览
    initView(item, temp) {
      console.log(item, temp, "点击图片");
      if (!temp.value) {
        return;
      }
      let _this = this;
      let itemList = []; //当前20条聊天里所有图片
      let tempPicList = [];
      // 消息漫游默认的isDownLoad 字段写入的'Message-roaming' 因此判断当其为'Message-roaming'的时候进行下载 其他情况直接预览
      // 已下载图片直接预览
      if (temp.isDownLoad != "Message-roaming") {
        //zk注释1和undefined都会进入
        // 已下载图片直接预览

        for (let i in this.currentTempChat) {
          //点击时获取全部small
          for (let j in this.currentTempChat[i]) {
            if (
              this.currentTempChat[i][j].type == "image" &&
              !this.currentTempChat[i][j].value
            ) {
              this.$downLoad(
                "api/v1/oim/image/downloadsmall.do",
                this.currentTempChat[i][j].DownLoadId,
                (wt) => {
                  var fileReader = new FileReader();
                  fileReader.onload = function (w) {
                    let info = '{"return_msg":""}';
                    if (wt.size !== 0) {
                      let base64 = w.target.result.replace(
                        /^data\:.{1,40}base64\,/gi,
                        ""
                      );
                      let arr = _this.currentTempChat[i][j].value
                        ? _this.currentTempChat[i][j].value
                            .split(".")
                            .splice(-1)[0]
                        : "png"; //获取后缀
                      info = _this.$shell("SaveFileStreamczs", [
                        _this.myInfo.id,
                        _this.currentTempChat[i][j].DownLoadId,
                        arr,
                        base64,
                        0,
                      ]);
                      info = JSON.parse(info);
                      console.log(info,750);
                      _this.smallPath[_this.currentTempChat[i][j].messageId] =
                        info.return_msg;
                      //这里smallvalue是大图地址，value是小图地址，将错就错吧
                      //value写入数据库
                      let tableName =
                        _this.toInfo.isGroup == "1"
                          ? _this.sqlTable.messageList
                          : _this.sqlTable.privateList;
                      let ss = _this.operationalDatabase(
                        `UPDATE ${tableName} SET value='${info.return_msg}' WHERE messageId='${_this.currentTempChat[i][j].messageId}';`
                      );
                      _this.$emit(
                        "changeProp",
                        _this.currentTempChat[i][j].messageId,
                        info.return_msg,
                        "value"
                      );
                    }
                  };
                  fileReader.readAsDataURL(wt);
                },
                (wt) => {
                  console.log("error");
                  console.log(wt);
                }
              );
            }
            if (
              this.currentTempChat[i][j].type == "image" &&
              !this.currentTempChat[i][j].smallValue
            ) {
              //zk修改，下载原图修改为下载small图，1224修改，预览图用原图downloadsmall->download
              this.$downLoad(
                "api/v1/oim/image/download.do",
                this.currentTempChat[i][j].DownLoadId,
                (wt) => {
                  var fileReader = new FileReader();
                  fileReader.onload = function (w) {
                    let base64 = w.target.result.replace(
                      /^data\:.{1,40}base64\,/gi,
                      ""
                    );
                    let arr = _this.currentTempChat[i][j].value
                      ? _this.currentTempChat[i][j].value
                          .split(".")
                          .splice(-1)[0]
                      : "png"; //获取后缀
                    let info = _this.$shell("SaveFileStreamczs", [
                      _this.myInfo.id,
                      _this.currentTempChat[i][j].DownLoadId,
                      arr,
                      base64,
                      1,
                    ]);
                    console.log(info,804);
                    if (
                      info.indexOf("输入的不是有效的 Base-64 字符串") < 0 ||
                      info.indexOf("The input is not a valid Base-64 string") <
                        0
                    ) {
                      info = JSON.parse(info);
                      _this.smallPath[_this.currentTempChat[i][j].messageId] =
                        info.return_msg;
                      //这里smallvalue是大图地址，value是小图地址，将错就错吧
                      //smallvalue写入数据库
                      let tableName =
                        _this.toInfo.isGroup == "1"
                          ? _this.sqlTable.messageList
                          : _this.sqlTable.privateList;
                      let ss = _this.operationalDatabase(
                        `UPDATE ${tableName} SET smallValue='${info.return_msg}' WHERE messageId='${_this.currentTempChat[i][j].messageId}';`
                      );
                      _this.$emit(
                        "changeProp",
                        _this.currentTempChat[i][j].messageId,
                        info.return_msg,
                        "small"
                      );
                    }
                  };
                  fileReader.readAsDataURL(wt);
                },
                (wt) => {
                  console.log("error");
                  console.log(wt);
                }
              );
            }

            // 2022/7/1 新增判断条件避免空值进入预览崩溃
            if (
              this.currentTempChat[i][j].type == "image" &&
              this.currentTempChat[i][j].value
            ) {
              //  0713  注释
              // tempPicList.push(this.currentTempChat[i][j].messageId);
              // itemList.push(this.currentTempChat[i][j]);

              //  0713  新增
              if (i == 0) {
                tempPicList.push(this.currentTempChat[i][j].messageId);
                itemList.push(this.currentTempChat[i][j]);
              } else if (i == 1) {
                tempPicList.unshift(this.currentTempChat[i][j].messageId);
                itemList.unshift(this.currentTempChat[i][j]);
              }
            }
          }
        }
        // this.$nextTick(()=>{
        // this.viewer && this.viewer.destroy();
        // this.viewer = new Viewer(document.getElementById('mainInfo'), {
        //   show: function() {
        //     this.viewer.update();
        //   },
        //   hide: function() { //在图片消失的时候销毁viewer
        //     this.viewer.destroy()
        //   },
        //   url:'small_pic',
        // });
        // })

        console.log(itemList, "图片消息的全部信息");

        let index = tempPicList.indexOf(temp.messageId);
        // let index = itemList.forEach(item=>{
        //   if (item.messageId == temp.messageId) return
        // })
        console.log(index, "当前图片的索引");

        // 已点击图片为中心  取前4 后4 共9张图    0719
        let newList = itemList.slice(index - 4 > 0 ? index - 4 : 0, index + 5);
        let newIndex = newList.findIndex((t) => t.messageId == temp.messageId);
        console.log(newList, newIndex, 838);
        let tempPics = [];
        let obj = {};
        // itemList
        newList.forEach((val) => {
          console.log(val, 743);
          obj = {};
          obj.UserID = this.myInfo.id;
          obj.ImageID = val.DownLoadId;
          obj.Suffix = val.value.toLowerCase().split(".").splice(-1)[0];
          obj.ThumbnailPath = this.$isRelativePath(val.value);
          obj.OriginalImagePath = val.smallValue
            ? this.$isRelativePath(val.smallValue)
            : val.smallValue;
          tempPics.push(obj);
        });
        tempPics = JSON.stringify(tempPics);

        let info = this.$shell("OpenWatchPicFormczs", [tempPics, newIndex]);
        console.log(info, "图片预览接口返回");
      } else {
        //zk注释，处理漫游消息的图片
        // 单人聊天
        if (this.toInfo.isGroup == 0) {
          this.downloadImg(temp);
        }
      }
    },
    // 根据漫游消息的图片id去服务器下载图片
    downloadImg(rValue) {
      let _this = this;
      this.$downLoad(
        "api/v1/oim/image/downloadsmall.do",
        rValue.DownLoadId,
        (wt) => {
          //zk修改，download该为downloadmini,1224改为small图，downloadmini->downloadsmall
          let myID = _this.myInfo.id;
          var fileReader = new FileReader();
          fileReader.onload = function (w) {
            let suffix = rValue.value.split(".").splice(-1)[0];
            let base64 = w.target.result.replace(
              /^data\:.{1,40}base64\,/gi,
              ""
            );
            let info = _this.$shell("SaveFileStreamczs", [
              myID,
              rValue.DownLoadId,
              suffix,
              base64,
              0,
            ]);
            info = JSON.parse(info);
            if (info.return_code == "TRUE") {
              Object.assign(rValue, {
                value: info.return_msg,
                isDownLoad: 1,
              });
              _this.$emit(
                "changeProp",
                rValue.messageId,
                info.return_msg,
                "value"
              ); //zk新增，修改value
              _this.$emit("changeProp", rValue.messageId, 1, "isDownLoad"); //zk新增，修改isDownLoad
              _this.$forceUpdate();
              _this.operationalDatabase(
                `UPDATE private_list_${_this.myInfo.id} SET value = '${info.return_msg}', isDownLoad = '1'  WHERE messageId = '${rValue.messageId}';`
              );
            }
          };
          fileReader.readAsDataURL(wt);
        },
        (wt) => {
          console.log("error");

          console.log(wt);
        }
      );
    },
    // zk注释，添加重点语录，待优化：若该成员已经添加该语录，则不会重复添加
    toAddText(item) {
      // console.log(this.组件内的重点语录, "homechatmain获取到的群语录")
      console.log(this.myInfo.id, item.messageId, "用户id和信息的id");
      let key = item.messageId;
      this.ws.send(
        this.$publicSend(key, "1.500", "1.1.2006", {
          userId: this.myInfo.id,
          messageId: key,
          groupId: this.toInfo.id,
        })
      );
      this.$emit("chatFunctionHandle", false); // 关闭右键菜单
    },
    //打开文章链接
    openLinkFn(item) {
      this.$emit("openLinkFn", item);
    },
    // 加入同屏
    joinScreenFn(temp) {
      if (temp.id == this.myInfo.id) return;
      // 判断是否已经加入同屏
      if (this.$store.state.screenRoomNo) {
        this.$message({
          message: "你正在使用同屏功能，请关闭后再次操作！",
          type: "warning",
        });
        return;
      }
      this.$confirm("确认加入同屏?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let value = temp.value ? JSON.parse(temp.value) : "";
          if (value) {
            let info = this.$ShareScreenAssistance("EnterRoom", [
              value.ClientID,
              value.RoomNo,
              value.RoomPassword,
            ]);
            console.log(info, "进入同屏");
            info = JSON.parse(info);
            if (info.return_code === "FALSE") {
              this.$message({
                message: info.return_msg,
                type: "warning",
              });
            }
          }
        })
        .catch(() => {});
    },
    //生成表情图片
    createFaceImage(index) {
      return `<img src='static/image/face/${index}.gif' draggable="false" style="width:1.6em;height:1.6em;vertical-align:bottom;flex-shrink:0;">`;
    },
    //获取坐标
    getItemCoordinate(e) {
      this.chatMenuTop = e.clientY - 50 || 0;
      this.chatMenuLeft = e.clientX - 50 || 0;
    },
    // 会话功能
    chatFunctionCt($event, item) {
      // 2022/7/27 暂将分享群的操作
      // if (item.type == "shareGroup" || this.isMultiSelect) {
      //   return;
      // }
      if (this.isMultiSelect) {
        return;
      }
      this.currentChatItem = item;
      // this.currentTextCopy = window.getSelection().toString();

      let div = document.createElement("div");
      let selected = window.getSelection().getRangeAt(0).cloneContents();
      div.appendChild(selected);
      this.currentTextCopy = div.innerHTML;

      console.log(this.currentChatItem, 'chatFunctionCt 会话功能');
      this.$emit("chatFunctionHandle", true);
      this.getItemCoordinate($event);
      let msg_send_time = new Date().getTime();
      if (msg_send_time - item.time > 120000) {
        this.flagTime = false;
      } else {
        this.flagTime = true;
      }
    },
    // 单选收藏
    toCollection(item) {
      this.$emit("chatFunctionHandle", false);
      let _item = JSON.parse(JSON.stringify(item));
      let collect = null;
      // 文本格式
      if (item.type == "text") {
        let isTrue = this.toInfo.isGroup == "1";
        let str;
        str = `${
          isTrue ? this.sqlTable.messageList : this.sqlTable.privateList
        } WHERE messageId='${item.messageId}'`;
        let res = this.operationalDatabase(
          `SELECT * FROM  ${str} ORDER BY time DESC;`,
          1
        );
        if (res.list.length > 0) {
          _item.value = res.list[0].value;
          _item.head = res.list[0].head;
        }
        collect = [
          {
            from_name: this.toInfo.name,
            type: this.toInfo.isGroup == "1" ? 1 : 0, //文件来源类型 0:单人文件 1:群文件
            message_id: _item.messageId, //消息id
            user_id: this.myInfo.id,
            file_id: _item.DownLoadId,
            from_id: this.toInfo.id,
            file_type: _item.type,
            // 修改前
            // value:_item
            // 字符段格式修改
            // 修改后(两端能显示，不能删除不能添加)
            value: {
              content: _item.value,
              time: _item.time,
              receiveName: _item.receiveName,
              sendName: _item.sendName,
              messageId: _item.messageId,
              receiveId: _item.receiveId,
              sendId: _item.sendId,
              isRead: _item.isRead,
              isDownLoad: _item.isDownLoad,
              DownLoadId: _item.DownLoadId,
              fileSize: _item.duration,
              duration: _item.duration,
              name: _item.name,
              fileName: _item.DownLoadId,
            },
          },
        ];
      }
      // 图片格式
      if (item.type == "image") {
        let isTrue = this.toInfo.isGroup == "1";
        collect = [
          {
            from_name: this.toInfo.name,
            type: this.toInfo.isGroup == "1" ? 1 : 0, //文件来源类型 0:单人文件 1:群文件
            message_id: _item.messageId, //消息id
            user_id: this.myInfo.id,
            file_id: _item.DownLoadId,
            from_id: this.toInfo.id,
            file_type: _item.type,
            // 修改前
            // value:_item
            // 字符段格式修改
            // 修改后(两端能显示，不能删除不能添加)
            value: {
              content: _item.DownLoadId,
              time: _item.time,
              receiveName: _item.receiveName,
              sendName: _item.sendName,
              messageId: _item.messageId,
              receiveId: _item.receiveId,
              sendId: _item.sendId,
              isDownLoad: _item.isDownLoad,
              DownLoadId: _item.DownLoadId,
              duration: _item.duration,
              fontSize: _item.fontSize,
              name: _item.name,
              fileName: _item.value,
            },
          },
        ];
      }
      // 文件格式
      if (item.type == "file") {
        let isTrue = this.toInfo.isGroup == "1";
        collect = [
          {
            from_name: this.toInfo.name,
            type: this.toInfo.isGroup == "1" ? 1 : 0, //文件来源类型 0:单人文件 1:群文件
            message_id: _item.messageId, //消息id
            user_id: this.myInfo.id,
            file_id: _item.DownLoadId,
            from_id: this.toInfo.id,
            file_type: "file",
            // 修改前
            // value:_item
            // 字符段格式修改
            // 修改后(两端能显示，不能删除不能添加)
            value: {
              content: _item.DownLoadId,
              time: _item.time,
              receiveName: _item.receiveName,
              sendName: _item.sendName,
              messageId: _item.messageId,
              receiveId: _item.receiveId,
              sendId: _item.sendId,
              isDownLoad: _item.isDownLoad,
              DownLoadId: _item.DownLoadId,
              fileSize: _item.duration,
              duration: _item.duration,
              name: _item.name,
              fileName: _item.value,
            },
          },
        ];
      }
      // 音频格式
      if (item.type == "audio") {
        collect = [
          {
            from_name: this.toInfo.name,
            type: this.toInfo.isGroup == "1" ? 1 : 0, //文件来源类型 0:单人文件 1:群文件
            message_id: _item.messageId, //消息id
            user_id: this.myInfo.id,
            file_id: _item.DownLoadId,
            from_id: this.toInfo.id,
            file_type: _item.type,
            // 修改前
            // value:_item
            // 字符段格式修改
            // 修改后(两端能显示，不能删除不能添加)
            value: {
              content: _item.value,
              time: _item.time,
              receiveName: _item.receiveName,
              sendName: _item.sendName,
              messageId: _item.messageId,
              receiveId: _item.receiveId,
              sendId: _item.sendId,
              isRead: _item.isRead,
              isDownLoad: _item.isDownLoad,
              DownLoadId: _item.DownLoadId,
              fileSize: _item.duration,
              duration: _item.duration,
              name: _item.name,
              fileName: _item.value,
            },
          },
        ];
      }
      // 文章格式
      if (item.type == "article") {
        let msg = JSON.parse(_item.value) || {};
        collect = [
          {
            from_name: this.toInfo.name,
            type: this.toInfo.isGroup == "1" ? 1 : 0, //文件来源类型 0:单人文件 1:群文件
            message_id: _item.messageId, //消息id
            user_id: this.myInfo.id,
            file_id: _item.DownLoadId,
            from_id: this.toInfo.id,
            file_type: _item.type,
            value: {
              title: msg.title,
              url: msg.url,
              describe: msg.describe,
              picture: msg.imgUrl || "",
            },
          },
        ];
      }
      // 添加收藏
      if (collect) {
        console.log(JSON.stringify(collect));
        addCollect({ collect: JSON.stringify(collect) })
          .then((res) => {
            if (res.result == 200) {
              this.$emit("getCollect");
              this.$Message.success(res.msg);
            } else {
              this.$Message.success(res.msg);
            }
          })
          .catch((error) => {
            this.$Message.success("服务器出错,稍后再试");
          });
      }
    },
    multiSelectClick() {
      this.$emit("chatFunctionHandle", false);
      this.$emit("multiSelectClick");
    },
    //设置聊天信息
    setChatList() {
      this.$emit("setChatList", this.chatList);
    },
    chatChoose(item) {
      if (this.isMultiSelect) {
        console.log(item, 1220);
        if (item.isDownLoad == 404) {
          this.$Message.warning("失败的文件无法被选中");
          return;
        }
        let result = !item.isChoose;
        this.$set(item, "isChoose", result);
        if (result) {
          this.chatChooseList.push(JSON.parse(JSON.stringify(item)));
        } else {
          this.delChatChoose(item);
        }
        this.$emit("setchatChooseList", this.chatChooseList);
        this.$forceUpdate();
      }
    },
    delChatChoose(item) {
      for (let i = 0; i < this.chatChooseList.length; i++) {
        if (this.chatChooseList[i].messageId == item.messageId) {
          this.chatChooseList.splice(i, 1);
        }
      }
    },
    announcementFile(item) {
      let _this = this;
      let index = item.isDownLoad.lastIndexOf("/");
      this.$emit("downloadListAddProcess", item);
      // this.downloadList.push(item);
      let str = item.isDownLoad.substring(index + 1, item.isDownLoad.length);
      let fileName = str.lastIndexOf("."); //取到文件名开始到最后一个点的长度
      let fileNameLength = str.length; //取到文件名长度
      let fileFormat = str.substring(fileName + 1, fileNameLength); //截
      console.log(str, fileFormat, "文件名");
      let info = _this.$shell("SaveFileUrl", [
        _this.myInfo.id,
        this.$store.state.url +
          "api/v1/oim/file/download.do?id=" +
          item.DownLoadId,
        item.messageId,
        str,
        fileFormat,
        "",
      ]);
      info = JSON.parse(info);
      console.log(info, "下载文件");
      if (info.return_code == "TRUE") {
        this.$Message.success("文件下载中,请稍后");
        this.$set(item, "loading", true);
      }
    },
    //待办
    toBacklog(item) {
      this.$emit("chatFunctionHandle", false);
      this.$emit("addBacklogShow", item);
    },
    groupEditConfirm() {
      console.log("请求群id", this.toInfo.id);
      let initid = this.$func.uuid();
      editGroup({
        userid: this.myInfo.id,
        name: this.editGroupName.trim() == "" ? "群聊" : this.editGroupName,
        id: this.toInfo.id,
        key: initid,
        introduce: "",
      });
      editGroup({
        userid: this.myInfo.id,
        name: this.editGroupName.trim() == "" ? "群聊" : this.editGroupName,
        id: this.toInfo.id,
        key: initid,
        introduce: "",
      })
        .then((res) => {
          console.log(res, "群名称修改");
          if (res.result == 200) {
            this.group_info.name = this.editGroupName;
            this.toInfo.name =
              this.editGroupName.trim() == "" ? "群聊" : this.editGroupName;
            this.group_info.name =
              this.editGroupName.trim() == "" ? "群聊" : this.editGroupName;
            this.editActive = true;
            this.$Message.success("修改成功");
          } else {
            this.$Message.success("修改失败");
          }
        })
        .catch((error) => {
          this.$Message.success("服务器出错,稍后再试25");
        });
    },
    self_update_session(type, value, id, dura, time) {
      for (let i in this.sessionList) {
        if (this.sessionList[i].id == this.toInfo.id) {
          this.$set(this.sessionList[i], "value", value);
          this.$set(this.sessionList[i], "duration", dura);
          this.$set(this.sessionList[i], "type", type);
          this.$set(this.sessionList[i], "messageId", id);
          this.$set(this.sessionList[i], "time", time);
        }
      }
    },
    groupEdit() {
      this.editActive = !this.editActive;
      this.editGroupName = this.group_info.name;
    },
    //保存群详情
    saveGroupInfo(msg) {
      let introduce = msg.introduce == null ? "" : msg.introduce;
      this.operationalDatabase(
        `REPLACE INTO ${this.sqlTable.groupList}(id,name,groupIntroduce,isJoin,head,total) VALUES('${msg.id}','${msg.name}','${introduce}',"1",'${msg.head}','${msg.memberToal}');`
      );
    },
    //群已读未读列表以及已下载和未下载
    readView(readData, activeIndex, currentItem) {
      console.log(currentItem);
      this.$emit("readView", readData, activeIndex, currentItem);
    },
    groupReadInfo(readData, type) {
      //readData1.2.1003
      if (readData && readData != "undefined") {
        // 有一个或多个人已读
        let data = JSON.parse(readData);
        let unreadUsers = [];
        let unreadUsers2 = [];
        if (data.unreadUsers && data.unreadUsers != "") {
          unreadUsers = data.unreadUsers.split(",");
        }
        if (this.group_detail.users.length > 0 && unreadUsers.length > 0) {
          this.group_detail.users.forEach((i) => {
            if (unreadUsers.indexOf(i.ID) > -1) {
              unreadUsers2.push(i);
            }
          });
        }
        console.log("data.unread", data);
        console.log("unreadUsers2", unreadUsers2);
        if (type) {
          return data.unread
            ? unreadUsers2.length <= 0
              ? "已下载"
              : unreadUsers2.length + "人未下载"
            : "已下载";
        } else {
          return data.unread
            ? unreadUsers2.length <= 0
              ? "已读"
              : unreadUsers2.length + "人未读"
            : "已读";
        }
      } else {
        // 全部未读
        if (type) {
          return this.group_detail.users.length - 1 + "人未下载";
        } else {
          return this.group_detail.users.length - 1 + "人未读";
        }
      }
    },
    showMap(temp) {
      this.$emit("showMap", temp);
    },
    init_auto_play() {
      this.$refs[
        `audio_image_${this.audio_item.messageId}`
      ][0].src = `static/image/home/ease_chat${
        this.audio_item.sendId == this.myInfo.id ? "to" : "from"
      }_voice_playing.png`;
      clearInterval(this.audio_time);
      this.audio_play = this.audio_item = this.audio_time = null;
    },
    toPlayAudio(item) {
      clearInterval(this.audio_time);
      this.audio_time = null;
      this.audio_item = item;
      let id = this.audio_item ? this.audio_item.messageId : "";
      let src = `static/image/home/ease_chat${
        this.audio_item && this.audio_item.sendId == this.myInfo.id
          ? "to"
          : "from"
      }_voice_playing.png`;
      // 初始化所有的音频/播放图片
      let audioAll = Array.prototype.slice.call(
        document.querySelectorAll("audio")
      );
      audioAll.map((item) => {
        item.currentTime = 0;
        item.previousElementSibling.src =
          "static/image/home/ease_chatfrom_voice_playing.png";
      });
      if (this.audio_play) {
        this.$refs[`audio_image_${id}`][0].src = src;
        this.audio_play.pause();
        if (this.audio_play != this.$refs[item.messageId][0]) {
          this.audio_play.currentTime = 0;
          this.audio_play = this.$refs[item.messageId][0];
          console.log(this.audio_play, "播放节点2");
          this.audio_play.play();
          this.audio_timer_inter();
        } else {
          this.audio_play = null;
        }
      } else {
        this.audio_play = this.$refs[item.messageId][0];
        console.log(this.audio_play, "播放节点1");
        this.audio_play.play();
        this.audio_timer_inter();
      }
    },
    audio_timer_inter() {
      let i = 1;
      this.$refs[
        `audio_image_${this.audio_item.messageId}`
      ][0].src = `static/image/home/ease_chat${
        this.audio_item.sendId == this.myInfo.id ? "to" : "from"
      }_voice_playing_f${i}.png`;
      this.audio_time = setInterval(() => {
        i++;
        if (i == 4) i = 1;
        this.$refs[
          `audio_image_${this.audio_item.messageId}`
        ][0].src = `static/image/home/ease_chat${
          this.audio_item.sendId == this.myInfo.id ? "to" : "from"
        }_voice_playing_f${i}.png`;
        this.$forceUpdate();
      }, 330);
    },
    rpfileName(value) {
      let index = value.lastIndexOf("/");
      let str = value.substring(index + 1, value.length);
      return str;
    },
    //打开文件目录
    openPath(item) {
      let path = item.isDownLoad == "self" ? item.filePath : item.isDownLoad;
      if (this.$store.state.user_hot_key[5]) {
        let res = this.$shell("OpenPathByUrl", [
          this.$store.state.user_hot_key[5],
          path ? this.$isRelativePath(path).replace(/\//g, "\\") : "" || "",
        ]);
        // let res = this.$shell("OpenPathByUrl",[this.$store.state.user_hot_key[5]]);
        console.log(
          res,
          item,
          this.$store.state.user_hot_key[5],
          this.$isRelativePath(path).replace(/\//g, "\\"),
          "打开目录"
        );
      } else {
        this.$Message.warning("请先设置默认目录");
      }
    },
    //点击打开文件路径
    toDownload(item) {
      let path = item.isDownLoad == "self" ? item.filePath : item.isDownLoad;
      let rep = this.$shell("SaveAS", [
        this.$isRelativePath(path),
        this.rpfileName(item.value),
      ]);
      rep = JSON.parse(rep);
      console.log(rep, "另存为");
      if (rep.return_code == "FALSE") {
        this.$set(item, "isDownLoad", 0);
        this.$Message.warning("系统找不到指定的文件,请重新下载");
        // this.$forceUpdate();
        return;
      }
      // this.toPreviewFile(item,isDownLoad);
    },
    //文件预览
    toPreviewFile(item, type) {
      let path =
        item.isDownLoad == "self"
          ? this.$isRelativePath(item.filePath)
          : this.$isRelativePath(item.isDownLoad);
      console.log(item, path, "文件预览");
      let rep = this.$shell("OpenFlieByUrl", [this.$isRelativePath(path)]);
      rep = JSON.parse(rep);
      console.log(rep, "文件预览");
      if (rep.return_code == "FALSE") {
        this.$Message.info("系统找不到指定的文件,请重新下载");
        // 公告文件预览
        if (type == "announcement") {
          this.$set(item, "isDownLoad", item.fontSize);
          this.$set(item, "upload", 2);
        } else {
          this.$set(item, "isDownLoad", 0);
          // 2022/5/5 zc新增，预览文件找不到后重新设置该的文件下载状态
          let rep = tools.operationalDatabase(
            `UPDATE ${this.sqlTable.messageList} SET isDownLoad='0' WHERE messageId='${item.messageId}';`
          );
          let repData = tools.operationalDatabase(
            `UPDATE ${this.sqlTable.privateList} SET isDownLoad='0' WHERE messageId='${item.messageId}';`
          );
        }
        // this.$forceUpdate();
        return;
      }
    },
    toDownFile(temp) {
      console.log(temp, "发送项");
      this.$emit("toDownFile", temp);
    },
    toDelChat(temp) {
      this.$emit("chatFunctionHandle", false);
      this.$set(temp, "functionShow", false);
      this.$emit("toDelChat", temp);
      this.$forceUpdate();
    },
    //撤销
    toUndo(item) {
      console.log({...item}, '撤销动作');
      // 2022/7/28 修改 增加对于群分享的撤回功能
      if (item.type != "shareGroup") {
        let undoList = this.$store.state.toUndoList;
        let star1 = item.value.indexOf(">");
        let undoItem = ''
        if(item.type == 'text'){
          undoItem = item.value
        }else{
          // 来自2024.4.3 不知道为什么要截掉6位
          undoItem = item.value.substring(star1 + 1, item.value.length - 6);
        }
        undoList[item.messageId] = [undoItem, item.type]; //按照消息id存起来
        this.$store.commit("setUndoList", undoList);
        console.log('撤销列表',undoList)
        this.$emit("chatFunctionHandle", false);
      }

      if (this.personalStatus == 4) {
        this.$Message.warning("离线状态无法进行该操作");
        return;
      }
      // 2022/5/20 zc新增 撤回时判断当前消息发送状态做不同处理
      if (item.isSuccessSend == 1) {
        this.$Message.warning("消息发送中，无法撤回");
        return;
      }
      if (item.isSuccessSend == 0) {
        this.$wsSendMsg(
          this.toInfo,
          item.messageId,
          "revocation",
          {
            text: this.myInfo.name + " 撤销了一条消息",
            gender: this.myInfo.gender || "1",
            head: this.myInfo.head || "",
            messageId: item.messageId,
          },
          this.ws,
          item.type == "announcement" ? "announcement" : ""
        );
      }

      let tableName =
        this.toInfo.isGroup == "1"
          ? this.sqlTable.messageList
          : this.sqlTable.privateList;
      let ss = this.operationalDatabase(
        `UPDATE ${tableName} SET type='revocation',value='您撤销了一条消息' WHERE messageId='${item.messageId}';`
      );
      item.value = "您撤销了一条消息";
      item.type = "revocation";
      this.$forceUpdate();
    },
    //是否重新编辑
    showReEdit(e) {
      let flag = this.timeNow - e.time < 300000;
      let undoList = this.$store.state.toUndoList;
      let type = "";
      if (undoList[e.messageId]) {
        type = undoList[e.messageId][1];
      }
      if (type == "text" && flag) {
        return true;
      } else return false;
    },
    //重新编辑
    reEdit(e) {
      let undoList = this.$store.state.toUndoList;

      console.log(undoList,'重新编辑数据');
      $("#contentInput")[0].innerHTML = undoList[e][0];
    },
    //index --->1为搜索,其他不需要参数
    operationalDatabase(statements, index) {
      let to = JSON.stringify({
        Sqlstr: statements,
      });
      return arguments[1]
        ? JSON.parse(this.$shellSQL(to, index))
        : JSON.parse(this.$shellSQL(to));
    },
    toForwarding(temp) {
      this.$emit("chatFunctionHandle", false);
      this.$emit("toForwarding", temp);
    },
    //转发本地文件，先上传
    toForwardingLocal(temp) {
      let initId = this.$func.uuid();
      console.log("本地文件", temp);
      if (temp.isDownLoad != "self") {
        let path = temp.isDownLoad.replace(/\//g, "\\");
        let infos = this.$shell("UpLoadFile", [
          "1",
          temp.sendId,
          initId,
          this.$isRelativePath(path),
          0,
          temp.name,
          temp.receiveId,
        ]);
      } else {
        let infos = this.$shell("UpLoadFile", [
          "1",
          temp.receiveId,
          initId,
          this.$isRelativePath(temp.filePath),
          0,
          temp.receiveName,
          temp.sendId,
        ]);
      }
      this.$emit("chatFunctionHandle", false);
      this.$emit("toForwarding", 1);
      this.$emit("toForwardingLocalData", temp.filePath);
    },
    insertHtmlAtCaret(html) {
      // console.log(document.getElementById("test").innerHTML)
      var sel, range;
      // debugger;
      if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
          range = sel.getRangeAt(0);
          range.deleteContents();
          // Range.createContextualFragment() would be useful here but is
          // non-standard and not supported in all browsers (IE9, for one)
          var el = document.createElement("div");
          el.innerHTML = html || "";
          var frag = document.createDocumentFragment(),
            node,
            lastNode;
          while ((node = el.firstChild)) {
            lastNode = frag.appendChild(node);
          }
          range.insertNode(frag);
          // Preserve the selection
          if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
          }
        }
      } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
      }
    },
    //处理表情
    toExpression(str) {
      var reg = /\[[\u4e00-\u9fa5]+\]/g;
      var num = [];
      var imageArr = str.match(reg);
      var imageTrue = [];
      var newArr = [].concat.apply([], this.expression);
      if (imageArr) {
        for (let i = 0, len = imageArr.length; i < len; i++) {
          for (let j = 0, lens = newArr.length; j < lens; j++) {
            if (new RegExp(newArr[j]).test(imageArr[i])) {
              num.push(this.createFaceImage(j));
              imageTrue.push(imageArr[i]);
              break;
            }
          }
        }
        for (let i in imageTrue) {
          str = str.replace(imageTrue[i], num[i]);
        }
      }
      return str;
    },
    //回复功能
    toReply(item) {
      this.$emit("chatFunctionHandle", false);
      this.$store.commit("setToReply", item);
      this.$store.commit("setToReplyTemp", item);
    },
    //复制功能
    toCopyChat(item) {
      console.log(item, "点击复制的item111");
      this.$emit("chatFunctionHandle", false);
      if (item.type == "text") {
        let isTrue = this.toInfo.isGroup == "1";
        let str;
        str = `${
          isTrue ? this.sqlTable.messageList : this.sqlTable.privateList
        } WHERE messageId='${item.messageId}'`;
        let res = this.operationalDatabase(
          `SELECT * FROM  ${str} ORDER BY time DESC;`,
          1
        );
        if (res.list.length > 0) {
          let value = this.$utilJs.htmlDecodeByRegExp(
            this.$utilJs.returnEncodeBr(res.list[0].value)
          );

          console.log(this.currentTextCopy, value, 1712);
          if (this.currentTextCopy) {
            this.$store.state.copyValue = this.currentTextCopy;
          } else {
            this.$store.state.copyValue = value;
          }
          console.log(this.$store.state.copyValue, "在聊天中存入仓库的内容");
        }
      } else if (item.type == "image" || item.type == "file") {
        //新增会话复制图片文件功能
        // if (!item.filePath && item.isDownLoad == 0) {//zk注释，复制选项的显隐已做处理
        //   this.$Message.warning("请先下载内容");
        //   return;
        // };
        let isImg = item.type == "image";
        let type = isImg ? "Bitmap" : "FileDrop";
        let data = item.filePath || item.isDownLoad;
        //如果是图片判断有无原图
        if (isImg) {
          if (item.smallValue) {
            data = item.smallValue;
          } else {
            data = item.value;
          }
        }
        let msg = this.$shell("SetClipboardData", [
          type,
          this.$isRelativePath(data),
        ]);
        this.$store.state.copyValue = null; //zk新增，复制文件和图片时，copyvalue为空
        this.$Message.warning("内容已复制到粘贴板");
        // if(isImg){//解决没有下载原图时，复制图片模糊
        //   let copyObj = JSON.stringify({
        //     type:"copyImage",
        //     value:this.$isRelativePath(data),
        //     DownLoadId:item.DownLoadId,
        //     size:item.duration
        //   })
        //   this.$store.state.copyValue = copyObj
        // }
      }

      this.$copyText(this.$store.state.copyValue).then(
        (e) => {
          // success
          console.log(e);
          this.$Message.warning("内容已复制到粘贴板");
        },
        (e) => {
          // faile
          console.log(e);
        }
      );
    },
    savePicture(item) {
      //zk修改，下载原图
      this.$emit("chatFunctionHandle", false);
      let tempPic = "";
      let _this = this;
      if (item.smallValue) {
        let path = this.$utilJs.path_replace(item.smallValue);
        let name = path.split("\\");
        this.$shell("SaveAS", [
          this.$isRelativePath(path),
          name[name.length - 1],
        ]);
      } else {
        //zk修改，下载原图rawvalue
        this.$downLoad(
          "api/v1/oim/image/download.do",
          item.DownLoadId,
          (wt) => {
            var fileReader = new FileReader();
            fileReader.onload = function (w) {
              let base64 = w.target.result.replace(
                /^data\:.{1,40}base64\,/gi,
                ""
              );
              let arr = item.value.split(".").splice(-1)[0]; //获取后缀
              let info = _this.$shell("SaveFileStreamczs", [
                _this.myInfo.id,
                item.DownLoadId,
                arr,
                base64,
                1,
              ]);
              info = JSON.parse(info);
              tempPic = info.return_msg;
              //smallvalue写入数据库
              let tableName =
                _this.toInfo.isGroup == "1"
                  ? _this.sqlTable.messageList
                  : _this.sqlTable.privateList;
              let ss = _this.operationalDatabase(
                `UPDATE ${tableName} SET rawValue='${tempPic}' WHERE messageId='${item.messageId}';`
              );
              _this.$emit("changeProp", item.messageId, info.return_msg, "raw");

              let path = _this.$utilJs.path_replace(tempPic); //zk修改item.value替换为tempPic，异步，提到上面
              console.log(path, item, "图片");
              let name = path.split("\\");
              console.log(name[name.length - 1], "图片名称");
              _this.$shell("SaveAS", [
                _this.$isRelativePath(path),
                name[name.length - 1],
              ]);
            };
            fileReader.readAsDataURL(wt);
          },
          (wt) => {
            console.log("error");
            console.log(wt);
          }
        );
      }

      // let path = this.path_replace(tempPic);//zk修改item.value替换为tempPic，异步，提到上面
      // console.log(path, item, '图片');
      // let name = path.split('\\');
      // console.log(name[name.length - 1], '图片名称');
      // this.$shell('SaveAS', [path, name[name.length - 1]]);
    },
    voiceConversion(item) {
      console.log(item, "语音item");
      this.$emit("chatFunctionHandle", false);
      audioToText({
        id: item.DownLoadId,
      }).then((rep) => {
        if (rep.err_no == "0") {
          let tableName =
            this.toInfo.isGroup == "1"
              ? this.sqlTable.messageList
              : this.sqlTable.privateList;
          let ss = this.operationalDatabase(
            `UPDATE ${tableName} SET value='${rep.result[0]}' WHERE messageId='${item.messageId}';`
          );
          console.log(ss, "语音转文字更新", tableName, item.messageId);
          // 只有点击语音转文字的时候才显示
          // this.$set(item,'value',rep.result[0]);
          this.$set(item, "isShow", rep.result[0]);
          // let esw = this.operationalDatabase(`UPDATE ${tableName} SET value='${rep.result[0]}' WHERE messageId='${item.messageId}';`)
        } else {
          this.$set(item, "value", "语音转换失败");
        }
        console.log(rep, "语音转文字");
      });
    },
    getMemberInfo(e, temp, isGroup) {
      this.$emit("getMemberInfo", e, temp, isGroup);
    },
    setMainFunction(item) {
      console.log(item, "单条数据");
      //发送消息超过2分钟后隐藏撤销按钮
      let msg_send_time = new Date().getTime();
      if (msg_send_time - item.time > 120000) {
        this.flagTime = false;
      } else {
        this.flagTime = true;
      }
      item.functionShow = !item.functionShow;
      this.$forceUpdate();
    },
    //免打扰设置显示
    free_icon_sign(id) {
      for (let i in this.free_list) {
        if (this.free_list[i].userId == id) {
          return true;
        }
      }
      return false;
    },
    get_top_boolean(id) {
      return !!this.setaList[id];
    },
    //滚动到底部
    scrollToBottom() {
      this.$refs.messageScroll.scrollTop = 0
    },
    //消息更新时往下滚动
    scrollToLower() {
      this.$nextTick(()=>{
        this.scrollTimer = setTimeout(()=>{
          console.log(this.$refs.messageScroll.scrollTop,this.$refs.messageScroll.scrollHeight,this.$refs.messageScroll.clientHeight,'急急急')
          if (this.$refs.messageScroll.scrollTop > -200) {
            this.$refs.messageScroll.scrollTop = this.$refs.messageScroll.scrollTop===0 ? -1 : 0
          }
          else {
            this.$refs.messageScroll.scrollTop += 70
          }
          console.log('---------急急急-----------')
        },100)
      })

    },
    messageScroll(e) {
      if (this.chatFunctionActive) {
        e.preventDefault();
      }
      let top = this.$refs.messageScroll.scrollTop;
      let height = this.$refs.messageScroll.scrollHeight - this.$refs.messageScroll.clientHeight;
      let swHeight = top + height;
      console.log('滚动距离',top)
      console.log('计算高度',height)
      // console.log(top,1943);
      if (swHeight < 200) {
        this.$emit("messageScrollChange");
      }
      //zk新增，到顶到底
      let chatItems = document.querySelectorAll(".chat_item");
      let total = 0;
      for (let i in chatItems) {
        if (chatItems[i].clientHeight) {
          total += chatItems[i].clientHeight;
        }
      }
      if (swHeight <= 2) {
        //预留2px的误差
        console.log("到顶了。。。。。", this.canSwitchChatMain);
        if (this.canSwitchChatMain) {
          let length = this.currentTempChat[1].length;
          let temp = this.currentTempChat[1];
          let id = temp[length - 1].messageId;
          this.$emit("getTop");
          this.$nextTick(() => {
            this.fixedPosition(id, "start");
          });
        }
        this.canSwitchChatMain = false; //触发一次之后禁止再触发
      }
      if (top > -10) {//total <= swHeight + 2
        //预留2px的误差
        console.log("到底了。。。。。", this.canSwitchChatMain);
        if (this.canSwitchChatMain) {
          let length = this.currentTempChat[0].length;
          let temp = this.currentTempChat[0];
          let id = temp[length - 1].messageId;
          this.tempFix = [id, "end"];
          this.$emit("getBottom");
          // this.$nextTick(()=>{
          //   this.fixedPosition(id,"end")
          // })
        }
        this.canSwitchChatMain = false; //触发一次之后禁止再触发
      }
      if (swHeight > 2 && top <= -10) {//top > 2 && top < total - height - 2
        //滚动到非顶部底部区域才能再次触发顶部底部事件，防止重复弹窗提醒以及重复触发顶部底部事件
        this.canSwitchChatMain = true;
      }
    },
    fixedPosition(id, type) {
      //zk128新增，翻页之后重新定位滚动条位置,type表示置顶置地还是center
      let idstr = `#chat_item${id}`;
      // console.log(idstr)
      // location.href = idstr
      let ele = document.querySelector(idstr);
      ele.scrollIntoView({ block: type });
    },
    moveCopy(item, event, type) {
      //type:0图片,1文件
      const id = "#chat_item" + item.messageId;
      const dom = document.querySelector(id);
      document.onmousemove = (e) => {
        //鼠标按下并移动的事件

        if (!dom.contains(e.target)) {
          //拖出当前div范围
          if (!this.moving) {
            if (
              (item.isDownLoad == 0 || item.isDownLoad == "Message-roaming") &&
              type == 1
            ) {
              this.$message({
                message: "请先下载文件",
                type: "warning",
              });
              document.onmousemove = null;
              document.onmouseup = null;
              return;
            }

            this.moving = true;
            let path = "";
            if (type == 0) {
              path = item.smallValue || item.value;
            } else {
              path =
                item.isDownLoad == "self"
                  ? item.filePath
                  : item.isDownLoad.replace(/\//g, "\\");
            }
            this.$shell("DragFile", [this.$isRelativePath(path)]);
            console.log(path, "文件路径");
          }
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
        this.moving = false;
      };
    },
    //回到最新位置
    backBottom() {
      this.$emit("backBottom");
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.messageScroll.scrollTop =
            this.$refs.messageScroll.scrollHeight;
        }, 100);
      });
    },
    //首条未读消息
    toFirstUnread() {
      this.$emit("switchChatMain", this.firstUnreadId);
    },
  },
  beforeDestroy() {
    if(this.scrollTimer){
      clearTimeout(this.scrollTimer)
    }
  }
};
</script>
<style scoped>
.divMysend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;




}

.replay {
    max-width: 50vw ;
    /* overflow-y: auto; */
    /* word-wrap:break-word; */
    word-break:break-all;
  }

.divTosend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wrap {
  display: flex;
  align-items: center;
  position: relative;
}

.wrapMy {
  justify-content: flex-end;
}

.wrapTo {
  justify-content: flex-start;
}
</style>
